<!-- 在父页面已引入所有js框架 -->

<!-- CDN引入viewUI start -->
<!-- <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> -->
<!-- CDN引入viewUI end -->

<!-- v-charts cdn引入start -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"> -->
<!-- v-charts cdn引入end -->



<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.js.map"></script> -->
<!-- 引入echarts的js文件 -->



<div id="map" style="background: #fff;padding: 0 30px;margin-bottom: 250px;">
    <Spin fix v-if="spinShow">
        <!-- 可以加动画 -->
    </Spin>
    <div>
        <div style="display: inline-block; width: 100%; height: 30%; position: relative; border-right: 1px solid;">

            <i-circle :stroke-color="circleColor1" :size="170" :trail-width="4" :stroke-width="5" :percent="haveLicensePercent" stroke-linecap="square" style="width: 180px; position: absolute; top:100px; left: 20px;">
                <div class="circleOne">
                    <h1>{{haveLicenseCount}}</h1>
                    <p>牌照持有人数</p>
                    <span>
                        占申请人数
                        <i>{{haveLicensePercent}}%</i>
                    </span>
                </div>
            </i-circle>

            <i-circle :size="170" :trail-width="4" :stroke-width="5" :percent="qualifiedPercent" :stroke-color="circleColor2" style="width: 180px; display: block; position: absolute; top:350px; left: 20px;">
                <div class="circleOne">
                    <h1>{{qualified}}</h1>
                    <p>骑行证持有人数</p>
                    <span>
                        占申请人数
                        <i>{{qualifiedPercent}}%</i>
                    </span>
                </div>
            </i-circle>
            <div style="width: 1px; height: 500px; border-left: 1px solid #ffe986; position: absolute; top:65px; left: 290px;">
            </div>
        </div>


        <div style="display: inline-block; width: 75%; position: relative; top: 0;left: 280px;">
            <!-- 各类违规情况占比 start-->
            <div id="illegal" style="width: 1000px;height: 650px;"> </div>
            <!-- 我们需要为 ECharts 准备一个【定义了高宽的】 DOM 容器 -->
            <!-- 各类违规情况占比 end-->
        </div>

        <div style="display: flex;justify-content: space-between;margin-top: 30px;margin-top: 50px;margin-bottom: 50px; ">
            <!-- 饼图1 -->
            <Card style="width: 49%;display: block; display: flex;justify-content: center;">
                <!-- <p slot="title" style="text-align: center;font-weight: bold; margin-top: 20px;">拥有电动车人员的类别分布情况</p> -->
                <div id="pie1" style="width: 500px;height: 500px;"></div>
                <!-- <ve-pie :data="sorts"></ve-pie> -->
            </Card>
            <!-- 饼图2 -->
            <Card style="width: 49%;display: block;display: flex;justify-content: center;">
                <!-- <p slot="title" style="text-align: center;font-weight: bold;">各校区持车情况比较</p> -->
                <div id="pie2" style="width: 500px;height: 500px;"></div>
                <!-- <ve-pie :data="vehicleHoldingSituationInEachCampus"></ve-pie> -->
            </Card>

        </div>

        <div style="width: 100%;display: flex;justify-content: space-between;padding-bottom: 50px;">
            <Card style="width: 49%;display: block;">
                <div id="charge1Chart" style="width: 100%;height: 500px;"> </div>
                <!-- 我们需要为 ECharts 准备一个【定义了高宽的】 DOM 容器 -->
                <!-- 各类违规情况占比 end-->
            </Card>
            <Card style="width: 49%;display: block;">
                <div id="charge2Chart" style="width: 100%;height: 500px;"> </div>
                <!-- 我们需要为 ECharts 准备一个【定义了高宽的】 DOM 容器 -->
                <!-- 各类违规情况占比 end-->
            </Card>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#map',
        data: {
            spinShow: true,
            qualified: null,
            haveLicenseCount: null,
            appliCount: null,
            circleColor1: ['#9ddefb', '#2db7f5'],
            circleColor2: ['#a8d7a8', '#5cb85c'],
            // 各校区持车数据start{
            viewVehicleHoldingSituation: {
                中校区: 0,
                北校区: 0,
                南校区: 0,
                西校区: 0,
                东校区: 0
            },
            // 各校区持车数据end}

            // 申请人员类别数据start{
            viewSort: {
                教工: 0,
                学生: 0,
                合同工: 0,
                驻校服务机构工作人员: 0,
                租户: 0,
                其它: 0
            },
            // 申请人员类别数据end}


            haveLicensePercent: null,
            qualifiedPercent: null,

            // echarts数据start
            viewBehavior: {
                转让骑行证: 0,
                伪造骑行证: 0,
                售卖骑行证: 0,
                拆卸骑行证: 0,
                借予他人使用: 0,
                故意损坏或涂鸦骑行证: 0,
                行驶速度过快: 0,
                未佩戴安全头盔: 0,
                未在规定区域停放: 0,
                未在规定区域充电: 0,
            },

            chargeRecord: []

            // echarts数据ends


        },

        methods: {
            getQualified() {
                var that = this;
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/select',
                    type: "POST",
                    data: {
                        audit_status: 1
                    },
                    // async: false,
                    success(res) {
                        if (res.error_code == 0) {
                            // console.log(typeof(res.data.length));
                            that.qualified = res.data.length;
                            that.qualifiedPercent = parseFloat(((res.data.length / that.appliCount) *
                                100).toFixed(1));
                            console.log("qualified:" + that.qualified);

                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        } else if (res.error_code == 2) {
                            console.log(res.msg)
                        }
                    },
                    error() {
                        that.$Message.warning({
                            content: "getQualified的ajax请求失败",
                            duration: 2
                        })
                    }

                })
            },
            getHaveLicenseCount() {
                var that = this;
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/selectAccordingToKeyValue',
                    type: "POST",
                    // async: false,
                    data: {
                        key: "haveLicense",
                        value: "true"
                    },
                    success(res) {
                        if (res.error_code == 0) {
                            that.haveLicenseCount = res.length;
                            that.haveLicensePercent = parseFloat(((res.length / that.appliCount) * 100)
                                .toFixed(1));
                            console.log("haveLicenseCount:" + that.haveLicenseCount);

                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        }
                    },
                    error() {
                        that.$Message.warning({
                            content: "getHaveLicenseCount的ajax请求失败",
                            duration: 2
                        })
                    }

                })

            },
            getAppliCount() {
                var that = this;
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/select',
                    type: "POST",
                    data: {
                        audit_status: [0, 1, -1]
                    },
                    // async: false,
                    success(res) {
                        if (res.error_code == 0) {
                            that.appliCount = res.data.length;
                            console.log("appliCount:" + that.appliCount);
                            that.getHaveLicenseCount();
                            that.getQualified();
                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        } else if (res.error_code == 2) {
                            console.log(res.msg);
                        }
                    },
                    error() {
                        that.$Message.warning({
                            content: "getAppliCount的ajax请求失败",
                            duration: 2
                        })
                    }

                })

            },

            // 获取某校区持车数量
            getCampusHaveECycle(stringValue) {
                var that = this;
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/selectAccordingToKeyValue',
                    type: "POST",
                    data: {
                        key: 'campus',
                        value: stringValue
                    },
                    // async: false,
                    success(res) {
                        if (res.error_code == 0) {
                            Vue.set(that.viewVehicleHoldingSituation, stringValue, res.length);
                            console.log(stringValue + ":" + that.viewVehicleHoldingSituation[
                                stringValue]);

                            // 以前的v-charts---------start
                            // var rowsData2 = [{
                            //     '校区': '南校区',
                            //     '人数': that.viewVehicleHoldingSituation['南校区']
                            // }, {
                            //     '校区': '北校区',
                            //     '人数': that.viewVehicleHoldingSituation['北校区']
                            // }, {
                            //     '校区': '中校区',
                            //     '人数': that.viewVehicleHoldingSituation['中校区']
                            // }, {
                            //     '校区': '东校区',
                            //     '人数': that.viewVehicleHoldingSituation['东校区']
                            // }, {
                            //     '校区': '西校区',
                            //     '人数': that.viewVehicleHoldingSituation['西校区']
                            // }]
                            // Vue.set(that.vehicleHoldingSituationInEachCampus, "rows", rowsData2);
                            // 以前的v-charts---------end
                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        }
                    },
                    error() {
                        that.$Message.warning({
                            content: "getCampusHaveECycle的ajax请求失败",
                            duration: 2
                        })
                        console.log("getCampusHaveECycle的ajax请求失败");
                    }
                })
            },

            //获取申请人员某类别数量
            get_sort(stringValue) {
                var that = this;
                $.ajax({
                    url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/selectAccordingToKeyValue",
                    type: "POST",
                    data: {
                        key: "person_type",
                        value: stringValue
                    },
                    // async: true,
                    success(res) {
                        if (res.error_code == 0) {
                            Vue.set(that.viewSort, stringValue, res.length);
                            console.log(stringValue + ":" + that.viewSort[stringValue]);

                            // 以前的v-charts---------start
                            // var rowsData1 = [{
                            //     '人员类别': '其他',
                            //     '人数': that.viewSort['其它']
                            // }, {
                            //     '人员类别': '教工',
                            //     '人数': that.viewSort['教工']
                            // }, {
                            //     '人员类别': '合同工',
                            //     '人数': that.viewSort['合同工']
                            // }, {
                            //     '人员类别': '驻校服务机构工作人员',
                            //     '人数': that.viewSort['驻校服务机构工作人员']
                            // }, {
                            //     '人员类别': '校内住户（租户）',
                            //     '人数': that.viewSort['租户']
                            // }, {
                            //     '人员类别': '学生',
                            //     '人数': that.viewSort['学生']
                            // }]
                            // Vue.set(that.sorts, "rows", rowsData1);
                            // 以前的v-charts---------end

                            // return res.length;
                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                            // return 0;
                        }
                    },
                    error() {
                        that.$Message.warning({
                            content: "get_sort的ajax请求失败",
                            duration: 2
                        })
                        console.log("get_sort的ajax请求失败");
                        return 0;
                    }
                })
            },

            // echarts start
            //获取某违规情况
            getViolations(stringValue) { // 参数stringValue 如 “行驶速度过快”
                var that = this;
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Violations/selectAccordingToKeyValue',
                    data: {
                        key: "behavior",
                        value: stringValue
                    },
                    // async: false,
                    type: "POST",
                    success(res) {
                        if (res.error_code == 0) {
                            Vue.set(that.viewBehavior, stringValue, res.length);
                            console.log(stringValue + ":" + that.viewBehavior[stringValue]);
                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        }
                    },
                    error() {
                        that.$Message.error({
                            content: res.msg
                        });
                    }
                })
            },

            //获取充电记录
            getCharge() {
                var that = this
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Chargerecord/selectChargeRecord',
                    type: "post",
                    success(res) {
                        if (res.error_code == 0) {
                            console.log(res.msg)
                            console.log(res.data)
                            that.chargeRecord = res.data
                        }
                    },
                    error() {
                        console.log("请求失败")
                    }
                })
            },
            // echarts end

            // 牌照持有情况和骑行证持有情况的百分比的赋值
            drawDatas() {
                this.haveLicensePercent = parseFloat(((this.haveLicenseCount / this.appliCount) * 100).toFixed(
                    1));
                this.qualifiedPercent = parseFloat(((this.qualified / this.appliCount) * 100).toFixed(1));
                console.log("haveLicensePercent:" + this.haveLicensePercent + "%");
                console.log("qualifiedPercent:" + this.qualifiedPercent + "%")
            }
        },
        watch: {
            qualified: {
                handler(newValue, oldValue) {
                    this.drawDatas();
                }
            },
            haveLicenseCount: {
                handler(newValue, oldValue) {
                    this.drawDatas();
                }
            },
            appliCount: {
                handler(newValue, oldValue) {
                    this.drawDatas();
                }
            },
            viewBehavior: {
                deep: true,
                handler() {
                    var that = this;
                    var chartDom = document.getElementById('illegal');
                    var myChart = echarts.init(chartDom);

                    // 数据排序
                    let datas = [{
                        value: that.viewBehavior['转让骑行证'],
                        name: '转让骑行证'
                    }, {
                        value: that.viewBehavior['伪造骑行证'],
                        name: '伪造骑行证'
                    }, {
                        value: that.viewBehavior['售卖骑行证'],
                        name: '售卖骑行证'
                    }, {
                        value: that.viewBehavior['拆卸骑行证'],
                        name: '拆卸骑行证'
                    }, {
                        value: that.viewBehavior['借予他人使用'],
                        name: '借予他人使用'
                    }, {
                        value: that.viewBehavior['故意损坏或涂鸦骑行证'],
                        name: '故意损坏或涂鸦骑行证'
                    }, {
                        value: that.viewBehavior['行驶速度过快'],
                        name: '行驶速度过快'
                    }, {
                        value: that.viewBehavior['未佩戴安全头盔'],
                        name: '未佩戴安全头盔'
                    }, {
                        value: that.viewBehavior['未在规定区域停放'],
                        name: '未在规定区域停放'
                    }, {
                        value: that.viewBehavior['未在规定区域充电'],
                        name: '未在规定区域充电'
                    }];
                    //冒泡排序
                    for (let i = 0; i < datas.length - 1; i++) {
                        for (let j = 0; j < datas.length - 1 - i; j++) {
                            if (datas[j].value < datas[j + 1].value) {
                                let temp = datas[j];
                                datas[j] = datas[j + 1];
                                datas[j + 1] = temp;
                            }
                        }
                    }
                    console.log(datas);

                    // 随机生成颜色
                    // let length = 0;
                    // for (var i in that.viewBehavior) {
                    //     length++;
                    // }
                    // console.log(length);
                    // let colors = new Array(length);
                    // for (var j = 0; j < length; j++) {
                    //     colors[j] = "#" + Math.floor(Math.random() * 16777215).toString(16);
                    //     console.log(colors[j]);
                    // }
                    // console.log(colors);

                    /*echarts start*/
                    //option 开始
                    /* 指定图表的配置项和数据 */
                    var option = {
                        legend: { //图例组件
                            bottom: '10px', //图例组件（即颜色分类说明图标）离容器上侧的距离
                        },
                        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272',
                            '#fc8452',
                            '#9a60b4', '#ea7ccc', '#808000',
                        ],
                        // 0: #5470c6
                        // 1: #91cc75
                        // 2: #fac858
                        // 3: #ee6666
                        // 4: #73c0de
                        // 5: #3ba272
                        // 6: #fc8452
                        // 7: #9a60b4
                        // 8: #ea7ccc
                        // 9: #808000

                        toolbox: { //工具栏组件相关行为
                            show: true,
                            feature: {
                                mark: {
                                    show: true
                                },
                                restore: {
                                    show: true
                                },
                                // 还原
                                saveAsImage: {
                                    show: true
                                } //保存为图
                            }
                        },
                        title: {
                            text: '各类违规情况人数及其占比',
                            top: '30px',
                            left: 'center'
                        },
                        // series start
                        series: [ //“事件”
                                {
                                    name: 'Nightingale Chart', //访问来源
                                    type: 'pie', //饼状图
                                    radius: [50, 200],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    /*'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                                    'area' 所有扇区圆心角相同，仅通过半径展现数据大小。*/
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                formatter: '{b} : {c} ({d}%)'
                                            },
                                            labelLine: {
                                                show: true
                                            },
                                            borderRadius: 8,
                                        },
                                    },
                                    data: datas
                                },
                            ]
                            // series end
                    };
                    //option结束
                    // echarts大饼图end

                    // 渲染视图
                    option && myChart.setOption(option);
                }
            },
            viewSort: {
                deep: true,
                handler() {
                    var that = this;
                    var pie1Dom = document.getElementById('pie1');
                    var pie1 = echarts.init(pie1Dom);
                    var option1;

                    option1 = {
                        color: ['#ac82e8', '#74bef7', '#6ed3b0', '#f7c14d', '#ec96a3', '#62cdf7'],
                        // 0: '#ac82e8',
                        // 1: '#74bef7',
                        // 2: '#6ed3b0',
                        // 3: '#f7c14d',
                        // 4: '#ec96a3',
                        // 5: '#62cdf7',
                        // 6: '#fc8452',
                        // 7: '#9a60b4',
                        // 8: '#ea7ccc',

                        title: {
                            text: '拥有电动车人员的类别分布情况',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'horizontal',
                            left: 'center',
                            bottom: '30px'
                        },
                        series: [{
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [{
                                value: that.viewSort['教工'],
                                name: '教工'
                            }, {
                                value: that.viewSort['学生'],
                                name: '学生'
                            }, {
                                value: that.viewSort['合同工'],
                                name: '合同工'
                            }, {
                                value: that.viewSort['驻校服务机构工作人员'],
                                name: '驻校服务机构工作人员'
                            }, {
                                value: that.viewSort['租户'],
                                name: '租户'
                            }, {
                                value: that.viewSort['其它'],
                                name: '其它'
                            }],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };

                    option1 && pie1.setOption(option1);

                }
            },
            viewVehicleHoldingSituation: {
                deep: true,
                handler() {
                    var that = this;
                    var pie2Dom = document.getElementById('pie2');
                    var pie2 = echarts.init(pie2Dom);
                    var option2;

                    option2 = {
                        color: ['#ac82e8', '#74bef7', '#6ed3b0', '#f7c14d', '#ec96a3', '#62cdf7'],
                        title: {
                            text: '各校区持车情况比较',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'horizontal',
                            left: 'center',
                            bottom: '30px'
                        },
                        series: [{
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [{
                                value: that.viewVehicleHoldingSituation['中校区'],
                                name: '中校区'
                            }, {
                                value: that.viewVehicleHoldingSituation['北校区'],
                                name: '北校区'
                            }, {
                                value: that.viewVehicleHoldingSituation['南校区'],
                                name: '南校区'
                            }, {
                                value: that.viewVehicleHoldingSituation['西校区'],
                                name: '西校区'
                            }, {
                                value: that.viewVehicleHoldingSituation['东校区'],
                                name: '东校区'
                            }],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };

                    option2 && pie2.setOption(option2);

                }
            },
            chargeRecord: {
                handler(newValue, oldValue) {
                    console.log(newValue);

                    let arr = newValue;
                    console.log(arr);
                    let first = [];
                    let second = [];
                    let third = [];
                    let fourth = [];
                    let fifth = [];


                    for (let j = 0; j < arr.length; j++) {
                        if (arr[j].fees > 0 && arr[j].fees <= 0.5) {
                            first = first.concat(arr[j]);
                        } else if (arr[j].fees > 0.5 && arr[j].fees <= 1) {
                            second = second.concat(arr[j]);
                        } else if (arr[j].fees > 1 && arr[j].fees <= 1.5) {
                            third = third.concat(arr[j]);
                        } else if (arr[j].fees > 1.5 && arr[j].fees <= 2) {
                            fourth = fourth.concat(arr[j]);
                        } else if (arr[j].fees > 2) {
                            fifth = fifth.concat(arr[j]);
                        }
                    }


                    let chargeChart1Dom = document.getElementById('charge1Chart');
                    let charge1Chart = echarts.init(chargeChart1Dom);
                    let charge1Option;

                    charge1Option = {
                        title: {
                            text: '充电时长统计情况',
                            left: 'center',
                            top: 20,
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: 60,
                            left: 'center'
                        },
                        series: [{

                            top: 100,
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                color: 'rgba(0, 0, 0, 0.7)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(0, 0, 0, 0.7)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '25',
                                    fontWeight: 'bold'
                                }
                            },

                            data: [{
                                value: first.length,
                                name: '0-0.5元'
                            }, {
                                value: second.length,
                                name: '0.5-1元'
                            }, {
                                value: third.length,
                                name: '1-1.5元'
                            }, {
                                value: fourth.length,
                                name: '1.5-2元'
                            }, {
                                value: fifth.length,
                                name: '2元以上'
                            }]
                        }]
                    };

                    charge1Option && charge1Chart.setOption(charge1Option);

                    // -------------------------------------------

                    let arr2 = newValue;
                    console.log(arr);
                    let first2 = [];
                    let second2 = [];
                    let third2 = [];
                    let fourth2 = [];
                    let fifth2 = [];



                    for (let j = 0; j < arr.length; j++) {
                        if (arr2[j].fees > 0 && arr2[j].fees <= 1) {
                            first2 = first2.concat(arr2[j]);
                        } else if (arr2[j].fees > 1 && arr2[j].fees <= 2) {
                            second2 = second2.concat(arr2[j]);
                        } else if (arr2[j].fees > 2 && arr2[j].fees <= 3) {
                            third2 = third2.concat(arr2[j]);
                        } else if (arr2[j].fees > 3 && arr2[j].fees <= 4) {
                            fourth2 = fourth2.concat(arr2[j]);
                        } else if (arr2[j].fees > 4) {
                            fifth2 = fifth2.concat(arr2[j]);
                        }
                    }


                    let charge2ChartDom = document.getElementById('charge2Chart');
                    let charge2Chart = echarts.init(charge2ChartDom);
                    let charge2Option;

                    charge2Option = {
                        title: {
                            text: '充电费用统计情况',
                            left: 'center',
                            top: 20,
                        },
                        // ------------------------
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['1元内', '1-2元', '2-3元', '3-4元', '4元以上'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [{
                            name: 'Direct',
                            type: 'bar',
                            barWidth: '60%',
                            data: [first2.length, second2.length, third2.length, fourth2.length,
                                fifth2.length
                            ],
                        }]
                    };


                    charge2Option && charge2Chart.setOption(charge2Option);

                }
            }
        },
        mounted: function() {

            var that = this;
            that.spinShow = true;
            that.getCharge();
            that.getAppliCount();
            // 这俩函数的执行放在getAppliCount函数执行成功且拿到数据后执行
            // this.getQualified();
            // this.getHaveLicenseCount();


            // 对各申请人员类别的数据获取
            // console.log(Object.keys(this.viewSort));
            for (var i = 0; i < Object.keys(that.viewSort).length; i++) {
                that.get_sort(Object.keys(that.viewSort)[i]);
            }
            // console.log(this.viewSort);
            // console.log(that.sorts.rows);
            // console.log(this.viewSort['教工']);


            // 对各校区持车情况的数据获取
            // vehicleHoldingSituationInEachCampus
            for (var i = 0; i < Object.keys(that.viewVehicleHoldingSituation).length; i++) {
                that.getCampusHaveECycle(Object.keys(that.viewVehicleHoldingSituation)[i]);
            }
            // console.log(this.viewVehicleHoldingSituation);



            // echarts大饼图start
            // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成图形
            // var chartDom = document.getElementById('illegal');
            // var myChart = echarts.init(chartDom);
            // 后端behavior有的value
            var values = ['转让骑行证', '伪造骑行证', '售卖骑行证', '拆卸骑行证', '借予他人使用',
                '故意损坏或涂鸦骑行证', '行驶速度过快', '未佩戴安全头盔', '未在规定区域停放', '未在规定区域充电'
            ];
            // 获取各类违规情况的人数
            for (var i = 0; i < values.length; i++) {
                that.getViolations(values[i]); //调用包含ajax的获取数据的函数
            }
            // console.log(this.viewBehavior);


            that.spinShow = false;

        }

    })
</script>